<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div class="top">
					<h3>代理商</h3>
					<el-button  @click="addAgenterFn" plain type="primary" v-if='counter.btnsObj.addFlag'>
						{{counter.btnsObj.addName}}
					</el-button>
				</div>
				<el-form :model="form" label-width="auto" style="width: 100%;margin: 15px 0;" class="item1">
					<el-form-item label="会员信息" label-width="90">
						<el-input v-model="form.info" clearable style="width: 200px;" placeholder="请输入会员昵称或者手机号" />
					</el-form-item>
					<el-form-item label="代理等级" label-width="90">
						<el-select v-model.number="form.level" style="width: 200px"  clearable placeholder="请选择">
							<el-option
							  v-for="item in options"
							  :key="item.proxysLevelId"
							  :label="item.levelName"
							  :value="item.proxysLevelId"
							  :disabled="item.disabled"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="状态" label-width="60">
						<el-select v-model="form.status" placeholder="全部" style="width: 200px" clearable>
							<el-option :value="'0'" label="禁用" />
							<el-option :value="'1'" label="正常" />
						</el-select>
					</el-form-item>
					<el-form-item label="创建时间" label-width="90">
						<div class="block">
						    <el-date-picker 
								style="width:200px"
								v-model="timevalue"
								type="datetimerange"
								range-separator="To"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								clearable
						    />
						</div>
					</el-form-item>
					<el-button type="primary" style="margin-left: 15px;" @click="search">搜索</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form>
				<el-table style="width: 100%" :data="tableData" height="45vh" >
					<el-table-column prop="userId" label="分销商信息"/>
					<el-table-column prop="proxyLevelId" label="代理等级"/>
					<el-table-column prop="proxyTotalMoney" label="代理佣金" />
					<el-table-column prop="createTime" label="创建时间"/>
					<el-table-column prop="proxyStatus" label="当前状态"/>
					<el-table-column label="操作" width="150">
						<template #default="record">
							<a class="mya" @click="update(record.row)">编辑</a>
							<a class="mya" @click="freeze(record.row)">冻结</a>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
				
			</el-main>
			
	    </el-container>
	</div>
	<!-- 冻结 -->
	<el-dialog
		v-model="dialogVisible"
	    title="提示"
	    width="500"
		align-center
		>
		<span>确定要将代理商状态改为冻结吗</span>
	    <template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="define">
					确定
				</el-button>
			</div>
	    </template>
	</el-dialog>
	<!-- 编辑 -->
	<el-dialog
		v-model="dialogVisible2"
	    title="编辑代理商"
	    width="500"
		align-center
		>
		<div class="myform">
			<div>
				<span class="characters">分销商</span>
				<span class="record">{{updateForm.userId}}</span>
			</div>
			<div style="margin-left: 60px;margin-top: 15px;">
				<el-form-item label="代理等级" label-width="90" required>
					<el-select v-model.number="updateForm.proxyLevelId" style="width: 200px"  clearable placeholder="请选择">
						<el-option
						  v-for="item in options"
						  :key="item.proxysLevelId"
						  :label="item.levelName"
						  :value="item.proxysLevelId"
						  :disabled="item.disabled"
						/>
					</el-select>
					<span style="margin-left:10px;color: #2525cd;" @click="reload">刷新</span>
					<span style="margin-left: 10px;color: #2525cd;" @click="goLevel">添加等级</span>
				</el-form-item>
				
			</div>
		</div>
	    <template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取消</el-button>
				<el-button type="primary" @click="updateDefine">
					确定
				</el-button>
			</div>
	    </template>
	</el-dialog>
	<!-- 添加代理商 -->
	<el-dialog
		v-model="dialogVisible3"
	    title="添加代理商"
	    width="500"
		align-center
		>
		<div class="myform">
			<div>
				<span class="characters">分销商</span>
				<span style="margin-left: 15px;">{{distributor}}</span>
				<el-button type="primary" style="margin-left: 10px;" @click="choose">选择分销商</el-button>
			</div>
			<div style="margin-left: 60px;margin-top: 15px;">
				<el-form-item label="代理等级" label-width="90" required>
					<el-select v-model.number="proxyLevelId" style="width: 200px" placeholder="请选择代理等级" clearable >
						<el-option
						  v-for="item in options"
						  :key="item.proxysLevelId"
						  :label="item.levelName"
						  :value="item.proxysLevelId"
						  :disabled="item.disabled"
						/>
					</el-select>
					<span style="margin-left:10px;color: #2525cd;" @click="reload">刷新</span>
					<span style="margin-left: 10px;color: #2525cd;" @click="goLevel">添加等级</span>
				</el-form-item>
				
			</div>
		</div>
	    <template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible3 = false">取消</el-button>
				<el-button type="primary" @click="addDis">
					确定
				</el-button>
			</div>
	    </template>
	</el-dialog>
	<!-- 选择分销商 -->
	<el-dialog
		v-model="dialogVisible4"
	    title="选择分销商"
	    width="600"
		style="height: 450px;"
		align-center
		>
		<div style="display: flex;">
			<el-form-item label="分销商信息" label-width="90" style="width: 45%;">
				<el-input v-model="trader" clearable style="width: 200px;" placeholder="请输入分销商昵称或者手机号" />
			</el-form-item>
			<el-button type="primary" style="margin-left: 15px;" @click="searchTrader">搜索</el-button>
			<el-button @click="reset2">重置</el-button>
		</div>
		<el-table style="width: 100%" :data="agentData" ref="multipleTableRef" height="250px">
			<el-table-column prop="userName" label="分销商信息"/>
			<el-table-column prop="distributionLevelId" label="分销商等级"/>
			<el-table-column prop="distributiorStatus" label="当前状态"/>
			<el-table-column label="操作">
				<template #default="record">
					<el-button type="primary" @click="chooseDis(record.row)">选择</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next"
			:page-count="total2"
			:page-size="pageSize"
			v-model:current-page="pageIndex"	
			@current-change="changePage2"
		></el-pagination>
	    <template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible4 = false">取消</el-button>
				<el-button type="primary" @click="updateDefine">
					确定
				</el-button>
			</div>
	    </template>
	</el-dialog>
</template>

<script setup>
	import Header from "@/components/Header.vue"
	import { onMounted, ref, reactive} from 'vue';
	import {AgenterList,
	AgentSearch,
	AgenterFreeze,
	UpdateAgenterLevel,
	InsertAgenter,
	AgentLevelList,
	getTraderlist,
	searchTraderlist,
	taderchoose,
	TaderChoose
	} from "@/api"
	import { Plus ,ArrowLeft} from '@element-plus/icons-vue';
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from '../stores/counter';
	import { ElMessage, ElMessageBox } from 'element-plus'
	
	let route=useRoute();
	let router=useRouter();
	let counter=useCounterStore();
	counter.btns=route.meta.btns
	
	let pageIndex=ref(1);
	let pageSize=5;
	let total=ref(0);
	let timevalue=ref()
	let form=reactive({
		siteId:1,
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		status:"",
		level:"",
		startTime:"",
		endTime:"",
		info:""
	})
	
	let options = ref([])
	// 代理等级下拉框
	const agentLevel=async()=>{
		let res = await AgentLevelList({
			siteId:1,
			pageIndex:pageIndex.value,
			pageSize:pageSize
		})
		options.value=res.list
		// console.log("代理等级",options.value)
	}
	
	// 列表
	let tableData = ref([])
	const agenterList=async()=>{
		let res = await AgenterList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		// console.log("列表",res.list)
		tableData.value=res.list
		console.log(tableData)
		total.value=res.pageCount
	}
	
	//点击分页器
	const changePage=(page)=>{
		console.log(page)
		pageIndex.value=page;
		agenterList()
	}

	
	// 搜索
	const search=async()=>{
		if(timevalue.value){
			console.log(timevalue.value)
			let startdata = timevalue.value[0].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let startdataTime = timevalue.value[0].toLocaleString().split(" ")[1].replace(/:/g, '-')
			let startTime = startdata + " " + startdataTime
			let enddata = timevalue.value[1].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let enddataTime = timevalue.value[1].toLocaleString().split(" ")[1].replace(/:/g, '-')
			let endtTime = enddata + " " + enddataTime
			form.startTime = startTime
			form.endTime = endtTime
		}
		let data={}
		for(var i in form){
			if(form[i]){
				data[i]=form[i]
			}
		}
		let res = await AgentSearch(data)
		// console.log("搜索",res)
		tableData.value=res.list
		total.value=res.pageCount
	}
	
	// 重置
	const reset=()=>{
		form.status=""
		form.level=""
		form.info=""
		timevalue.value=''
		agenterList()
	}
	
	// 冻结
	const dialogVisible = ref(false)
	let pId = ref()
	const freeze=(pid)=>{
		pId.value=pid.proxyId
		// console.log("pId",pId)
		dialogVisible.value=true
	}
	// 冻结确认
	const define=async()=>{
		let res = await AgenterFreeze({
			proxyId:pId.value
		})
		// console.log("冻结",res)
		dialogVisible.value=false
		ElMessage.success("冻结成功")
		search()
	}
	
	// 编辑
	let updateForm=reactive({})
	const dialogVisible2 = ref(false)
	const update=(detail)=>{
		dialogVisible2.value=true
		Object.assign(updateForm,detail)
		// console.log("编辑",detail)
	}
	// 编辑确认
	const updateDefine=async()=>{
		let res = await AgenterFreeze({
			proxyId:updateForm.proxyId,
			proxyLevelId:updateForm.proxyLevelId
		})
		// console.log("编辑确认",res)
		if(res){
			ElMessage.success("修改成功")
		}
		dialogVisible2.value=false
	}
	
	// 刷新
	const reload=()=>{
		window.location.reload()
	}
	
	// 点击添加等级
	const goLevel=()=>{
		router.push('/hidedistribute/hidedistributemanage/hidedistributelevel')
	}
	
	// 添加代理商
	let addForm=reactive({
		siteId:1,
		proxyLevelId:"",
		userId:""
	})
	const dialogVisible3 = ref(false)
	const addAgenterFn=()=>{
		dialogVisible3.value=true
		distributor.value=''
		proxyLevelId.value=''
	}
	
	// 选择分销商
	const dialogVisible4 = ref(false)
	const choose=()=>{
		dialogVisible3.value=false
		dialogVisible4.value=true
	}
	
	// 列表
	let total2=ref(0);
	let agentData = ref([])
	const distributorList=async()=>{
		let res = await TaderChoose({
			siteId:1
		})
		// console.log("可选分销商列表",res)
		agentData.value=res
		// console.log(agentData)
		total2.value=res.pageCount
	}
	
	//点击分页器
	const changePage2=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		distributorList()
	}
	
	
	// 选择分销商  搜索
	let trader=ref()
	const searchTrader=async()=>{
		let res = await searchTraderlist({
			siteId:1,
			info:trader.value
		})
		// console.log("搜索11",res)
		agentData.value=res.list
		total2.value=res.pageCount
	}
	
	// 选择分销商  重置
	const reset2=()=>{
		trader.value=""
		distributorList()
	}
	
	// 点击选择
	let distributor=ref("")
	let userid=ref()
	let proxyLevelId=ref()
	const chooseDis=(detail)=>{
		// console.log("detail",Number(detail.userId))
		distributor.value=detail.userName
		userid.value=Number(detail.userId)
		dialogVisible3.value=true
		dialogVisible4.value=false
	}
	
	// 添加代理商  确认
	const addDis=async()=>{
		let res = await InsertAgenter({
			siteId:1,
			proxyLevelId:proxyLevelId.value,
			userId:userid.value
		})
		// console.log("add",res)
		dialogVisible3.value=false
		ElMessage.success("添加成功")
		agenterList()
	}
	

	onMounted(()=>{
		agenterList()
		agentLevel()
		distributorList()
	})
</script>

<style scoped lang="less">
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
			
		}
		.item1{
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
		}
		.mya{
			color: #4b5db9;
			margin:0 4px;
			cursor: pointer;
		}
	}
	.myform{
		margin-top: 20px;
		.characters{
			display: inline-block;
			text-align: right;
			height: 30px;
			line-height: 30px;
			width: 140px;
		}
		.record{
			display: inline-block;
			padding-left: 10px;
			height: 30px;
			line-height: 30px;
		}
	}
</style>